<template>
  <div class="goodsinfo-container">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!-- 商品轮播图区域 -->
    <!-- <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等</div>
      </div>
    </div>-->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swipe :lunbotuList="lunbotu" :isfull="false"></swipe>
        </div>
      </div>
    </div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品名称</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">市场价：
            <del>￥2399</del>&nbsp;&nbsp;销售价：
            <span class="now_price">￥2199</span>
          </p>
          <p>购买数量：
            <numbox @getCount="getSelectedCount"></numbox>
            <!-- <numbox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numbox> -->
          </p>
          <p>
            <mt-button type="primary" szie="small">立即购买</mt-button>
            <mt-button type="danger" szie="small" @click="addToShopCar">加入购物车</mt-button>
            <!-- 分析 如何实现加入购物车 拿到选择的数量 -->
            <!-- 1，分析 按钮属于goodsinfo页面  数字属于numbox组件 -->
            <!-- 2，由于涉及到了父子组件的嵌套 所以无法直接在goodsinfo页面中获取选中的商品数量值 -->
            <!-- 3，解决： 涉及到子组件向父组件传值(事件调用机制)-->
            <!-- 4，事件调用的本质 父向子传递方法 子调用这个方法 同时吧这个数据当做参数 传递给这个方法 -->
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：</p>
          <p>库存情况：</p>
          <p>上架时间：</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goDesc">图文介绍</mt-button>
        <!-- 这里可以用编程式导航 但是需要传入一个值 -->
        <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import swipe from "../subcomponent/swipe";
import numbox from "../subcomponent/goodsinfo_numbox";
export default {
  data() {
    return {
      // 将路由参数对象中的id 挂载到data 方便后期调用
      id: this.$route.params.id,
      lunbotu: [],
      goodsinfo: {}, //商品信息
      // 控制小球的隐藏 和显示
      ballFlag: false,
      selectedCount:1 // 保存用户选中的商品数量 默认 认为用户买一个
    };
  },
  components: {
    swipe,
    numbox
  },
  created() {
    this.getLunbotu();
    // this.getGoodsinfo()
  },
  methods: {
    getLunbotu() {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getlunbo")
        .then(res => {
          if (res.body.status === 0) {
            // 先循环轮播图数组的每一项 为 item添加img属性
            // res.body.message.foreach(item=>{
            //     item.img = item.src
            //     在文档提供的图片地址属性不一致的情况下 设置统一的属性 方便调取数据
            // })
            this.lunbotu = res.body.message;
          }
        });
    },
    getGoodsinfo() {
      // 获取商品信息
      this.$http.get("URL").then(res => {
        if (res.body.status === 0) {
          this.goodsinfo = res.body.message[0];
        }
      });
    },
    goDesc(id) {
      // 点击使用编程式导航 跳转图文介绍页面
      // this.$router.push({name:'/home/goodsdesc',parmas:{id}})
      this.$router.push("/home/goodsDesc");
    },
    goComment(id) {
      // 点击 跳转评论页面
      // this.$router.push({name:'/home/goodscomment',parmas:{id}})
      this.$router.push("/home/goodsComment");
    },
    addToShopCar() {
      // 添加到购物车
      this.ballFlag = !this.ballFlag;
      // 拼接出一个 要保存到 store中car数组里的商品信息对象
      // var goodsinfo = { id:this.id, count:this.selectedCount, price:this.goodsinfo.price, selected:true }
      // 调用 store中的mutations来将商品加入购物车
      // this.$store.commit('addToCar',goodsinfo)
    },
    beforeEnter(el){
        el.style.transform = "translate(0,0)"
    },
    enter(el,done){
        el.offsetWidth
        // 小球动画优化思路
        // 1，分析导致动画不准确的原因：小球最终位移到的位置已经局限在了某一分辨率下的滚动条未滚动的情况下
        // 2，只要分辨率和测试的时候不一样 或者 滚动条有一定的滚动距离之后 问题就出现
        // 3，因此我们经过分析 得到结论 不能把位移的横纵坐标直接写死 而是应该根据不同的情况 动态计算这个坐标值
        // 4，经过分析 得出解决思路 先得到底栏购物车的横纵坐标 在得到小球的横纵坐标 然后让 y 值求差 得到的结果 就是横纵坐标要位移的距离
        // 5，如果对获取 底栏和小球的位置    domObject.getBoundingClientRect()

        // 获取小球 在页面中的位置 
        const ballPosition = this.$refs.ball.getBoundingClientRect()
        // 获取底栏在页面中的位置
        const badgePosition = document.getElementById('badge').getBoundingClientRect()
        const xdist = badgePosition.left - ballPosition.left
        const ydist = badgePosition.top - ballPosition.top

        el.style.transform = `translate(${xdist}px,${ydist}px)`
        el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)"
        done()
    },
    afterEnter(el){
        this.ballFlag = !this.ballFlag
    },
    getSelectedCount(count){
      // 当子组件把选中的数量传递给父组件的时候 把选中的值 保存到data上
      this.selectedCount = count
      console.log('父组件拿到的数值为' + this.selectedCount)
    }
  }
};
</script>
<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>

